import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";

import LoginInstace from "./reactRouter的使用/login/index";
import ArticleInstace from "./reactRouter的使用/article/index";
// 记账本的功能
import CaseText from "@/记账本功能使用/index";
import Month from "@/记账本功能使用/month";
import Year from "@/记账本功能使用/year";
import New from "@/记账本功能使用/new";
//1. 引入reactrouter
import { createBrowserRouter, RouterProvider } from "react-router-dom";

import store from "./记账本功能使用/redux";
const style = {
  fontSize: "20px",
  color: "#2ecc71",
  border: "1px solid #ccc",
  margin: "20px",
  width: "200px",
};

const router = createBrowserRouter([
  { path: "/login", element: <LoginInstace /> },
  { path: "/article", element: <ArticleInstace /> },
  { path: "/article/:id/:uname", element: <ArticleInstace /> },
  {
    path: "/",
    element: <App />,
    children: [
      //  默认路由配置 去掉path路径使用index:true代替  而且跳转只需要到/根路径
      // { path: "/user", element: <div>我是联系人界面</div> },
      {
        index: true,
        element: <div style={style}>我是联系人界面</div>,
      },
      {
        path: "/about",
        element: <div style={style}>我是关于界面</div>,
      },
    ],
  },
  {
    path: "/caseText",
    element: <CaseText />,
    children: [
      { index: true, element: <Month /> },
      { path: "year", element: <Year /> },
    ],
  },
  { path: "/caseText/new", element: <New /> },
  { path: "*", element: <div>404页面</div> },
]);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <RouterProvider router={router}></RouterProvider>
  </Provider>
);
